<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>
<div class="layui-fluid">

    <div class="layui-form layui-row layui-col-space10"  style="margin: 5%; display: none" id="userRolelist">
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">会员管理</div>
                <div class="layui-card-body">
                    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                        搜索：
                        <div class="layui-inline">
                            <input class="layui-input" name="username" id="username" placeholder="用户名" autocomplete="off">
                        </div>
                        <div class="layui-inline">
                            <select name="usertype" class="layui-select" id="usertype">
                                <option value="">--用户类型--</option>
                                <option value="1">博物馆会员</option>
                                <option value="2">个人会员</option>
                                <option value="3">其他单位会员</option>
                            </select>
                        </div>
                        <button class="layui-btn" data-type="reload">搜索</button>
                    </div>

                    <table class="layui-hide" id="table_demo" lay-filter="table_demo"></table>
                    <script type="text/html" id="usertypetmp">
                        {{# var usertype=d.usertype }}
                        {{# if (usertype=='1'){ }}
                        <span class="layui-badge layui-bg-red">博物馆会员</span>
                        {{# }else if (usertype=='2'){ }}
                        <span class="layui-badge layui-bg-blue">个人会员</span>
                        {{# }else if (usertype=='3'){ }}
                        <span class="layui-badge layui-bg-green" >其他单位会员</span>
                        {{# }else{ }}
                        <span class="layui-badge layui-bg-orange">管理员</span>
                        {{# }  }}
                    </script>
                    <script type="text/html" id="table_operate">
                        <a class="layui-btn layui-btn-xs" lay-event="password">重置密码</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="role">角色</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function randomCoding(){
        //创建26个字母数组
        var arr = ['A','B','C','D','E','F','G','H','J','K','M','N','P','Q','R','S','T','U','V','W','X','Y','Z','1','2','3','4','5','6','7','8','9'];
        var idvalue ='';
        var n = 4;//这个值可以改变的，对应的生成多少个字母，根据自己需求所改
        for(var i=0;i<n;i++){
            idvalue+=arr[Math.floor(Math.random()*32)];
        }
        return idvalue;
    }
    layui.use(['table','element','form'],function () {
        var table = layui.table
            ,element = layui.element
            ,form = layui.form;

        table.render({
            elem: '#table_demo'
            ,url: '/userlist'
            ,method : 'post'
            ,toolbar: true
            ,defaultToolbar: ['filter', 'print']
            ,cellMinWidth: 80
            ,page: true
            ,cols: [
                [{type:'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID',  sort: true, fixed: 'left'}
                ,{field: 'username', title: '用户名'}
                ,{field: 'usertype', title: '用户类型',templet: '#usertypetmp'}
                ,{fixed: 'right', title:'操作', toolbar: '#table_operate', width:200}
                ]
            ]
        });

        var $ = layui.$, active = {
            reload: function(){
                var username = $('#username');
                var usertype = $('#usertype');

                //执行重载
                table.reload('table_demo', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        username: username.val(),
                        usertype: usertype.val()
                    }
                });
            }
        };

        $('.test-table-reload-btn .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        table.on('tool(table_demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                if(data.username==="admin"){
                    layer.msg('该用户无法删除！', {icon: 2});
                }else{
                    layer.confirm('确定删除该用户？删除后无法恢复', function(index){
                        $.ajax({
                            url:"/deluser",
                            async: false,
                            type:"POST",
                            dataType: "text",
                            data:{"id":data.id},
                            success: function(aa){
                                if(aa==="error"){
                                    layer.msg('删除失败！', {icon: 2});
                                    location.reload()
                                }else if(aa==="success"){
                                    layer.msg('删除成功！', {icon: 1});
                                    obj.del();
                                    layer.close(index);
                                }
                            }
                        });
                    });
                }
            }else if(obj.event === 'password'){
                if(data.username==="admin"){
                    layer.msg('该用户无法重置密码！', {icon: 2});
                }else{
                    var pwd = randomCoding();
                    layer.confirm('确定重置该用户密码为：'+pwd, function(index){
                        $.ajax({
                            url:"/resetPwd",
                            async: false,
                            type:"POST",
                            dataType: "text",
                            data:{"id":data.id,"pwd":pwd},
                            success: function(aa){
                                if(aa==="error"){
                                    layer.msg('重置密码失败！', {icon: 2});
                                    layer.close(index);
                                }else if(aa==="success"){
                                    layer.msg('重置密码成功！', {icon: 1});
                                    layer.close(index);
                                }
                            }
                        });
                    });
                }

            }else if(obj.event === 'role'){
                $.ajax({
                    url:"/getuser2role",
                    async: false,
                    type:"POST",
                    dataType: "json",
                    data:{"id":data.id},
                    success: function(aa){
                        var res = aa.res;
                        $("#userRolelist").empty();
                        for(var i=0;i<res.length;i++){
                            if(res[i]['ishave']==0){
                                $("#userRolelist").append(' <div class="layui-col-md12">\n' +
                                    '<input type="checkbox" value="'+res[i]["id"]+'" title="'+res[i]["name"]+'" lay-filter="perid" lay-skin="primary"> </div>')
                            }else{
                                $("#userRolelist").append(' <div class="layui-col-md12">\n' +
                                    '<input type="checkbox" value="'+res[i]["id"]+'" title="'+res[i]["name"]+'" lay-filter="perid" lay-skin="primary" checked> </div>')
                            }
                        }
                        form.render();
                        form.on('checkbox(perid)', function(oo){
                            var type = "";
                            if(oo.elem.checked===true){
                                type="add"
                            }else if(oo.elem.checked===false){
                                type="del"
                            }
                            $.ajax({
                                url:"/user2roleManage",
                                async: false,
                                type:"POST",
                                dataType: "text",
                                data:{"userid":data.id,"type":type,"roleid":oo.value},
                                success: function(aa){
                                    if(aa==="error"){
                                        layer.msg('更改角色失败！', {icon: 2});
                                    }else if(aa==="success"){
                                        layer.msg('更改角色成功！', {icon: 1});
                                    }
                                }
                            });
                        });

                        layer.open({
                            type: 1
                            ,skin: 'layui-layer-molv'
                            ,area: ['380px', '270px']
                            ,title: ['管理角色','font-size:18px']
                            ,btn: ['取消']
                            ,shadeClose: true
                            ,shade: 0 //遮罩透明度
                            ,maxmin: true //允许全屏最小化
                            ,content:$("#userRolelist")  //弹窗路径
                            ,btn1 : function(index, layero) { // 取消按钮回调函数
                                layer.close(index); // 关闭弹出层
                            }
                        });
                    }
                });
            }
        });
    })
</script>
</body>
</html>